import React, { useState } from 'react'
import { nanoid } from 'nanoid'
import './App.css'
export default function App() {
  const obj = {
    todos: [
      { id: 1, name: '吃饭', done: true },
      { id: 2, name: '睡觉', done: false },
      { id: 3, name: '打代码', done: false },
      { id: 4, name: '逛街', done: true }
    ]
  }
  const [state, setState] = useState(obj)
  const addTodo = (todoObj) => {
    const { todos } = state
    const newTodos = [todoObj, ...todos]
    setState({ todos: newTodos })
  }
  const deleteTodo = (id) => {
    const { todos } = state
    const newTodos = todos.filter(todoObj => todoObj.id !== id)
    setState({ todos: newTodos })
  }
  const updateTodo = (id, done) => {
    const { todos } = state
    const newTodos = todos.map(todoObj => {
      if (todoObj.id === id) {
        return { ...todoObj, done }
      } else {
        return todoObj
      }
    })
    setState({ todos: newTodos })
  }
  const checkAllTodo = (done) => {
    const { todos } = state
    const newTodos = todos.map(todoObj => { return { ...todoObj, done } })
    setState({ todos: newTodos })
  }
  const clearTodo = () => {
    const { todos } = state
    const newTodos = todos.filter(todoObj => !todoObj.done)
    setState({ todos: newTodos })
  }
  return (
    <div className="todo-container">
      <div className="todo-wrap">
        <Header addTodo={addTodo} />
        <List todos={state.todos} deleteTodo={deleteTodo} updateTodo={updateTodo} />
        <Footer todos={state.todos} checkAllTodo={checkAllTodo} clearTodo={clearTodo} />
      </div>
    </div>
  )
}
const Header = ({ addTodo }) => {
  const handleKey = ({ keyCode, target }) => {
    if (keyCode !== 13) return
    if (target.value.trim() === '') return
    const todoObj = { id: nanoid(), name: target.value, done: false }
    addTodo(todoObj)
    target.value = ''
  }
  return (
    <div className="todo-header">
      <input onKeyUp={handleKey} type="text" placeholder="请输入你的任务名称，按回车键确认" />
    </div>
  )
}
const Item = ({ id, name, deleteTodo, updateTodo, done }) => {
  const [mouse, setMouse] = useState(false)
  const handleMouse = (flag) => {
    return () => {
      setMouse(flag)
    }
  }
  const handleDelete = (id) => {
    if (window.confirm('Are you sure to cancel?')) {
      deleteTodo(id)
    }
  }
  const handleTodo = (id) => {
    return e => {
      updateTodo(id, e.target.checked)
    }
  }
  return (
    <li style={{ background: mouse ? '#ccc' : '#fff' }} onMouseEnter={handleMouse(true)} onMouseLeave={handleMouse(false)}>
      <label>
        <input onChange={handleTodo(id)} type="checkbox" checked={done} />
        <span>{name}</span>
      </label>
      <button onClick={() => { handleDelete(id) }} className="btn btn-danger" style={{ display: mouse ? 'block' : 'none' }}>删除</button>
    </li>
  )
}
const List = ({ todos, deleteTodo, updateTodo }) => {
  return (
    <ul className="todo-main">
      {todos.map(todo => <Item key={todo.id} {...todo} deleteTodo={deleteTodo} updateTodo={updateTodo} />)}
    </ul>
  )
}
const Footer = ({ checkAllTodo, clearTodo, todos }) => {
  const handleAllCheck = (e) => {
    checkAllTodo(e.target.checked)
  }
  const todoDone = () => {
    clearTodo()
  }
  const haveDone = todos.reduce((prev, cur) => prev + (cur.done ? 1 : 0), 0)
  return (
    <div className="todo-footer">
      <label>
        <input onChange={handleAllCheck} type="checkbox" checked={haveDone === todos.length && todos.length !== 0 ? 1 : 0} />
      </label>
      <span>
        <span>已完成{haveDone}</span> /全部{todos.length}
      </span>
      <button onClick={todoDone} className="btn btn-danger">清除已完成任务</button>
    </div>
  )
}